import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

Item {
    id: taskManagementPage
    
    property var samplingMgr
    property var auditLog
    property var qmlBridge
    
    Rectangle {
        anchors.fill: parent
        color: "#f5f5f5"
        
        ColumnLayout {
            anchors.fill: parent
            anchors.margins: 20
            spacing: 20
            
            // Header
            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 60
                color: "#4CAF50"
                radius: 8
                
                RowLayout {
                    anchors.fill: parent
                    anchors.margins: 20
                    
                    Text {
                        text: "Task Management"
                        font.pixelSize: 20
                        font.bold: true
                        color: "white"
                    }
                    
                    Item { Layout.fillWidth: true }
                    
                    Button {
                        text: "Create New Task"
                        onClicked: createTaskDialog.open()
                    }
                }
            }
            
            // Task Statistics
            RowLayout {
                Layout.fillWidth: true
                spacing: 20
                
                Rectangle {
                    Layout.fillWidth: true
                    Layout.preferredHeight: 80
                    color: "white"
                    radius: 8
                    border.color: "#e0e0e0"
                    border.width: 1
                    
                    Column {
                        anchors.centerIn: parent
                        spacing: 5
                        
                        Text {
                            text: samplingMgr ? samplingMgr.pendingTasksCount.toString() : "0"
                            font.pixelSize: 24
                            font.bold: true
                            color: "#FF9800"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                        
                        Text {
                            text: "Pending Tasks"
                            font.pixelSize: 14
                            color: "#666"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                    }
                }
                
                Rectangle {
                    Layout.fillWidth: true
                    Layout.preferredHeight: 80
                    color: "white"
                    radius: 8
                    border.color: "#e0e0e0"
                    border.width: 1
                    
                    Column {
                        anchors.centerIn: parent
                        spacing: 5
                        
                        Text {
                            text: samplingMgr ? samplingMgr.completedTasksCount.toString() : "0"
                            font.pixelSize: 24
                            font.bold: true
                            color: "#4CAF50"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                        
                        Text {
                            text: "Completed Tasks"
                            font.pixelSize: 14
                            color: "#666"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                    }
                }
                
                Rectangle {
                    Layout.fillWidth: true
                    Layout.preferredHeight: 80
                    color: "white"
                    radius: 8
                    border.color: "#e0e0e0"
                    border.width: 1
                    
                    Column {
                        anchors.centerIn: parent
                        spacing: 5
                        
                        Text {
                            text: "0"
                            font.pixelSize: 24
                            font.bold: true
                            color: "#F44336"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                        
                        Text {
                            text: "Failed Tasks"
                            font.pixelSize: 14
                            color: "#666"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                    }
                }
            }
            
            // Task List
            Rectangle {
                Layout.fillWidth: true
                Layout.fillHeight: true
                color: "white"
                radius: 8
                border.color: "#e0e0e0"
                border.width: 1
                
                ColumnLayout {
                    anchors.fill: parent
                    anchors.margins: 20
                    spacing: 15
                    
                    Text {
                        text: "Recent Tasks"
                        font.pixelSize: 18
                        font.bold: true
                        color: "#333"
                    }
                    
                    ListView {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        model: taskListModel
                        delegate: taskDelegate
                        
                        ScrollBar.vertical: ScrollBar {}
                    }
                }
            }
        }
    }
    
    // Task List Model
    ListModel {
        id: taskListModel
        
        Component.onCompleted: {
            // Sample data - in real implementation, this would come from samplingMgr
            append({
                taskName: "Morning Sampling",
                taskType: "Timed",
                targetValue: "300 sec",
                status: "Completed",
                createdAt: "2024-01-15 08:00:00",
                completedAt: "2024-01-15 08:05:00"
            })
            append({
                taskName: "Air Quality Check",
                taskType: "Volume",
                targetValue: "10 L",
                status: "Running",
                createdAt: "2024-01-15 09:00:00",
                completedAt: ""
            })
            append({
                taskName: "Evening Sampling",
                taskType: "Timed",
                targetValue: "600 sec",
                status: "Pending",
                createdAt: "2024-01-15 18:00:00",
                completedAt: ""
            })
        }
    }
    
    // Task Delegate
    Component {
        id: taskDelegate
        
        Rectangle {
            width: ListView.view.width
            height: 80
            color: index % 2 === 0 ? "#f9f9f9" : "white"
            border.color: "#e0e0e0"
            border.width: 1
            
            RowLayout {
                anchors.fill: parent
                anchors.margins: 15
                spacing: 20
                
                Column {
                    Layout.fillWidth: true
                    spacing: 5
                    
                    Text {
                        text: taskName
                        font.pixelSize: 16
                        font.bold: true
                        color: "#333"
                    }
                    
                    Text {
                        text: taskType + " - " + targetValue
                        font.pixelSize: 14
                        color: "#666"
                    }
                }
                
                Column {
                    spacing: 5
                    
                    Rectangle {
                        width: 80
                        height: 25
                        color: getStatusColor(status)
                        radius: 12
                        
                        Text {
                            anchors.centerIn: parent
                            text: status
                            color: "white"
                            font.pixelSize: 12
                            font.bold: true
                        }
                        
                        function getStatusColor(status) {
                            switch(status) {
                                case "Completed": return "#4CAF50"
                                case "Running": return "#FF9800"
                                case "Pending": return "#2196F3"
                                case "Failed": return "#F44336"
                                default: return "#9E9E9E"
                            }
                        }
                    }
                    
                    Text {
                        text: createdAt
                        font.pixelSize: 12
                        color: "#999"
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }
                
                Button {
                    text: "Details"
                    onClicked: {
                        console.log("Show task details for:", taskName)
                    }
                }
            }
        }
    }
    
    // Create Task Dialog
    Dialog {
        id: createTaskDialog
        title: "Create New Task"
        width: 400
        height: 300
        anchors.centerIn: parent
        modal: true
        
        ColumnLayout {
            anchors.fill: parent
            spacing: 15
            
            TextField {
                id: taskNameField
                Layout.fillWidth: true
                placeholderText: "Task Name"
            }
            
            RowLayout {
                Layout.fillWidth: true
                
                RadioButton {
                    id: timedTaskRadio
                    text: "Timed Sampling"
                    checked: true
                }
                
                RadioButton {
                    id: volumeTaskRadio
                    text: "Volume Sampling"
                }
            }
            
            RowLayout {
                Layout.fillWidth: true
                
                Text {
                    text: timedTaskRadio.checked ? "Duration (seconds):" : "Volume (liters):"
                }
                
                SpinBox {
                    id: targetValueSpinBox
                    from: 1
                    to: timedTaskRadio.checked ? 3600 : 100
                    value: timedTaskRadio.checked ? 300 : 10
                }
            }
            
            RowLayout {
                Layout.fillWidth: true
                
                Text {
                    text: "Flow Rate (L/min):"
                }
                
                SpinBox {
                    id: flowRateSpinBox
                    from: 1
                    to: 20
                    value: 10
                }
            }
            
            Item { Layout.fillHeight: true }
            
            RowLayout {
                Layout.fillWidth: true
                
                Button {
                    text: "Cancel"
                    onClicked: createTaskDialog.close()
                }
                
                Item { Layout.fillWidth: true }
                
                Button {
                    text: "Create Task"
                    enabled: taskNameField.text.length > 0
                    onClicked: {
                        if (samplingMgr) {
                            var taskType = timedTaskRadio.checked ? 0 : 1
                            // samplingMgr.createTask(taskNameField.text, taskType, targetValueSpinBox.value, flowRateSpinBox.value)
                            console.log("Creating task:", taskNameField.text, taskType, targetValueSpinBox.value, flowRateSpinBox.value)
                        }
                        createTaskDialog.close()
                    }
                }
            }
        }
    }
}